import React from 'react'
import { Outlet,useNavigate} from 'react-router-dom'


export default function Home() {
//useNavigate hooks 
//可以用于路由跳转，还可以传递路由参数 
//第一个参数为路由地址，第二个参数为一个对象，对象中可以写state属性，通过state属性，可以给子组件传递数据

//path传参：参数写在路由地址后，查询字符串之前，用path传参时，在路由表的路由地址最后需要加上 ‘：+参数名字’（自己取的）
//在子组件获取时：通过useParams（）获取,获取到的是一个对象，对象中的属性名，是在路由表中自己取的名字，值为父组件在useNavigate的第一个参数中传的
  const navigate = useNavigate()
  const getMusicHandle =()=>{
    navigate('/main/home/music/8325/?username=高高',{
      state:[ 
          { id: "001", name: "最伟大的作品" },
          { id: "002", name: "夜曲" },
          { id: "003", name: "爷爷泡的茶" },
          { id: "004", name: "兰亭序" },
          { id: "005", name: "别怕变老" }
        ] 
    })
  }
  const getNewsHandle =()=>{
    navigate('/main/home/news/8568/?username=条条',{
      state:[
        { id: "001", name: "空间站国旗与地球同框" },
        { id: "002", name: "罗永浩谈钟薛高卖得贵" },
        { id: "003", name: "麦当劳员工将掉地上面包放回货架" },
      ]
    })
  }
  

  return (
    <div>
        <h3>我是Home的内容</h3>
        <button onClick={getMusicHandle}>music</button>
        <button onClick={getNewsHandle}>news</button>
        {/* 在要渲染子组件的位置上书写<Outlet/> */}
        <Outlet/>
    </div>
       
  )
}
